<template>
  <Form
    ref="searchForm"
    :model="searchForm"
    :rules="rules"
    :label-width="labelWidth"
    label-position="right"
  >
    <Row :gutter="24" type="flex" justify="start">
      <i-col v-bind="grid">
        <FormItem label="类目名称:" prop="title" label-for="title">
          <Input
            v-model="searchForm.title"
            placeholder="请输入类目名称"
            element-id="title"
            @on-enter="handleSubmit"
            clearable
          />
        </FormItem>
      </i-col>
      <i-col v-bind="grid">
        <FormItem label="是否热门" prop="isHot">
            
                <Select v-model="searchForm.isHot" placeholder="请选择是否热门" filterable clearable>
                  <Option
                    v-for="(option, index) in isHotSelect"
                    :value="option.value"
                    :key="index"
                  >{{option.displayValue}}</Option>
                </Select>
            
        </FormItem>
      </i-col>
      <i-col v-bind="grid">
          <FormItem label="类目级别:" prop="categoryLevel" label-for="categoryLevel">
            <Select v-model="searchForm.categoryLevel" element-id="categoryLevel" placeholder="请选择类目级别" filterable clearable @on-change="handleSubmit">
              <Option
                v-for="(option, index) in categoryLevelSelect"
                :value="option.value"
                :key="index"
              >{{option.label}}</Option>
            </Select>
          </FormItem>
        </i-col>
      <template v-if="collapse">
        
      </template>
      <i-col v-bind="grid" class="ivu-quick-opt">
          <Button type="primary" @click="handleSubmit">查询</Button>
          <Button class="ivu-ml-8" @click="handleReset">重置</Button>
          <a class="ivu-ml-8" @click="collapse = !collapse">
            <template v-if="!collapse">
              展开
              <Icon type="ios-arrow-down" />
            </template>
            <template v-else>
              收起
              <Icon type="ios-arrow-up" />
            </template>
          </a>
      </i-col>
    </Row>
  </Form>
</template>
<script>
import { isHostSelect } from '@/api/select'
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'GoodsCategorySearchQuick',
  data() {
    return {
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 24
      },
	  dataDictCodes: ['IS_ACTIVE','IS_GOODS_HOT'],
	  dataDictItems: {},
	  isActiveSelect:[],
	  isHotSelect:[],
      labelWidth: 120,
      collapse: false,
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: null,
        sortOrder: null,
        id: null,
        idMin: null,
        idMax: null,
        parentId: null,
        parentIdMin: null,
        parentIdMax: null,
        title: null,
        picUrl: null,
        description: null,
        categoryLevel: null,
        categoryLevelMin: null,
        categoryLevelMax: null,
        categoryOrder: null,
        categoryOrderMin: null,
        categoryOrderMax: null,
        isHot: null,
        isHotMin: null,
        isHotMax: null,
        version: null,
        versionMin: null,
        versionMax: null,
        createTime: null,
        createTimeMin: null,
        createTimeMax: null,
        updateTime: null,
        updateTimeMin: null,
        updateTimeMax: null,
        isActive: null,
        isActiveMin: null,
        isActiveMax: null
      },
      rules: {},
      isHostSelect: isHostSelect,
      categoryLevelSelect: [
        {
          value: 1,
          label: '一级类目'
        },
        {
          value: '2',
          label: '二级类目'
        },
        {
          value: 3,
          label: '三级类目'
        }
      ]
    }
  },
  computed: {},
  mounted() {
  	 utils.getDataDict(this.dataDictCodes).then(response => {
  		  if (response) {
  			this.dataDictItems = response
  			utils.getSelectDictItems(this, 'IS_ACTIVE', 'isActive', 'isActiveSelect')
  			utils.getSelectDictItems(this, 'IS_GOODS_HOT', 'isHot', 'isHotSelect')
  		  }
  		}).catch(error => {
  		  console.log(error)
  		})
  },
  methods: {
    handleSubmit() {
      this.$emit('searchData', this.searchForm)
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNo = 1
      this.searchForm.pageSize = 10
      this.handleSubmit()
    }
  }
}
</script>
<style>
.ivu-quick-opt {
  text-align: right;
}
.ivu-ml-8 {
  margin-left: 8px !important;
}
</style>